<template>
  <BasicContainer>
    <ElRow :span="24">
      <ElCol :md="3" :sm="24" :xs="24" class="info__tree">
        <FyTree :data="treeData" :option="treeOption" @node-click="nodeClick">
          <template #default="{ node, data }">
            <span class="el-tree-node__label">
              <ElTooltip v-if="data.isLock" class="item" content="无数据权限" effect="dark" placement="right-start">
                <span>{{ node.label }} <i class="el-icon-lock"></i></span>
              </ElTooltip>
              <span v-if="!data.isLock">{{ node.label }}</span>
            </span>
          </template>
        </FyTree>
      </ElCol>
      <ElCol :md="21" :sm="24" :xs="24" class="info__main">
        <FyCurd
          ref="crud"
          v-model="form"
          :before-open="handleOpenBefore"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :permission="permissionList"
          :table-loading="tableLoading"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-update="handleUpdate"
          @row-save="handleSave"
          @row-del="handleDel">
          <template #menu="{ type, size, row }">
            <ElButton
              v-if="permissions.problem_infor_add"
              :size="size"
              :type="type"
              icon="el-icon-edit"
              @click="showRectify(row)">
              整改措施
            </ElButton>
          </template>
          <template #menuLeft>
            <ElButton
              v-if="permissions.problem_infor_export"
              class="filter-item"
              icon="el-icon-download"
              plain
              size="small"
              type="primary"
              @click="exportExcel">
              导出
            </ElButton>
            <ElButton
              v-if="permissions.problem_infor_export"
              class="filter-item"
              plain
              type="primary"
              size="small"
              icon="el-icon-upload"
              @click="$refs.excelUpload.show()">
              导入
            </ElButton>
          </template>
          <template #ctiNameForm="{ disabled }">
            <VueTreeSelect
              v-model="form.ctiId"
              :normalizer="normalizer"
              :disabled="disabled"
              :options="ctiParentData"
              placeholder="问题分类" />
          </template>
          <!-- 附件上传组件{ 需要传入uniqueCode/model/classify} -->
          <template #uploadPageForm>
            <UploadPage
              ref="UploadPage"
              :unique-code="uniqueCode"
              :upload-permissions="permissionList"
              :view-type="viewType"
              classify="info"
              model="problem" />
          </template>
        </FyCurd>
      </ElCol>
    </ElRow>
    <!--excel 模板导入 -->
    <ExcelUpload
      ref="excelUpload"
      title="问题信息导入"
      :url="`${services.personnelService}/infor/import`"
      :temp-url="`${services.personnelService}/sys-file/local/problemInfo.xlsx`"
      temp-name="问题信息导入模板.xlsx"
      @refreshDataList="refreshChange" />
    <ElementDialog :visible.sync="visibleRectify" title="整改措施" top="5%" width="95%">
      <Rectify
        v-if="visibleRectify"
        ref="rectify"
        :problem-infor-id="problemInforId"
        :problem-infor-num="problemInforNum" />
      <template #footer>
        <ElButton @click="visibleRectify = false">关闭</ElButton>
        <!--        <el-button type="primary" @click="checkRowData" >确定</el-button>-->
      </template>
    </ElementDialog>
  </BasicContainer>
</template>

<script>
  import { addObj, delObj, fetchList, putObj } from '@/api/problem/infor'
  import { tree } from '@/api/problem/cti'
  import { tableOption } from '@/const/crud/problem/infor'
  import { mapState } from 'vuex'
  import { getUUID } from '@/api/admin/uuid'

  import { services } from '@/config'

  export default {
    name: 'InforModel',
    components: {
      Rectify: () => import('@/module/problem/rectify/index')
    },
    data() {
      return {
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            label: 'name',
            value: 'id'
          }
        },
        treeData: [],
        tableLoading: false,
        tableOption,
        ctiParentData: [],
        form: {},
        uniqueCode: '',
        visibleRectify: false,
        problemInforId: -1,
        problemInforNum: '',
        viewType: '',
        services
      }
    },
    computed: {
      ...mapState('user', ['permissions']),
      permissionList() {
        return {
          addBtn: this.$isEmpty(this.permissions.problem_infor_add, false),
          delBtn: this.$isEmpty(this.permissions.problem_infor_del, false),
          editBtn: this.$isEmpty(this.permissions.problem_infor_edit, false),
          downloadBtn: this.$isEmpty(this.permissions.problem_infor_download, false)
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        tree().then(response => {
          this.treeData = response.data.data
        })
      },
      nodeClick(data) {
        this.page.page = 1
        // console.log(data)
        this.getList(this.page, { ctiCode: data.code })
      },
      // 列表查询
      getList(page, params) {
        this.tableLoading = true
        fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        )
          .then(response => {
            this.tableData = response.data.data.records
            this.page.total = response.data.data.total
            this.tableLoading = false
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      // 删除
      handleDel: function (row, index) {
        this.$confirm(`是否确认删除ID为${row.id}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return delObj(row.id)
          })
          .then(data => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
      },
      // 更新
      handleUpdate: function (row, index, done, loading) {
        putObj(row)
          .then(data => {
            this.$message.success('修改成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 保存
      handleSave: function (row, done, loading) {
        if (row.ctiId === undefined || Number.isNaN(row.ctiId)) {
          this.$message.success('请选择问题分类')
          return
        }
        addObj(row)
          .then(data => {
            this.$message.success('添加成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 每页条数改变事件
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      // 当前页发生改变事件
      currentChange(current) {
        this.page.currentPage = current
      },
      // 查询事件
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      // 刷新事件
      refreshChange() {
        this.getList(this.page)
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }

        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      //  导出excel
      exportExcel() {
        const date = this.$dateFormat(new Date())
        this.$downBlobFile('/problem/infor/export', this.searchForm, `问题详情_${date}.xlsx`, 'post')
      },
      handleOpenBefore(show, type) {
        window.boxType = type
        this.viewType = type
        tree().then(response => {
          this.ctiParentData = response.data.data
          // console.log(this.ctiParentData)
        })
        // 添加附件参数
        if (type === 'edit') {
          this.uniqueCode = this.form.unid
          // this.tableOption.column[7].display = true
        } else {
          // this.tableOption.column[7].display = false
          getUUID().then(response => {
            this.uniqueCode = response.data.data
            this.form.unid = response.data.data
          })
        }
        show()
      },
      // 显示整改措施
      showRectify(row) {
        this.problemInforId = parseInt(row.id)
        this.problemInforNum = row.number
        this.visibleRectify = true
        // this.$router.push({ path: '/problem/feedback/form/3'})
        // this.$nextTick(() => {
        //   this.$refs.rectify.openAddDialog()
        // })
      }
    }
  }
</script>

<style lang="scss">
  .info {
    height: 100%;

    &__tree {
      padding-top: 3px;
      padding-right: 20px;
    }

    &__main {
      .el-card__body {
        padding-top: 0;
      }
    }
  }
</style>
